【CSS】使用 Flex 後圖片受到擠壓？快試試 flex-shrink

事情是這樣子的，前陣子在實作留言板的時候，遇到了以下問題：

使用 Flex 進行排版後，一旦留言字數多，大頭貼便很明顯地遭到擠壓，所幸上網爬文後很快的找到解決方法。

flex-shrink

flex-shrink 默認值是 1，若空間不足，元素將會自行縮小（壓縮）。
而當 flex-shrink 設置為 0，則代表空間不足時不壓縮。

flex-shrink: 0;

如此一來，大頭貼就依照原先構想的樣子來顯示了，不會再因為文字過多而受到擠壓。

注意事項

display: flex 是設置在外層元素（元素），而 flex-shrink 則是與 flex 搭配使用，設置在子元素上。

參考資料

Flex 布局 元素被挤压的问题